<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
			<canvas id="canvas" style="border: 1px solid #aaa; display: block;margin: 50px auto;">
			
			
		</canvas>
	</body>
	<script>
	window.onload = function(){
	var canvas = document.getElementById("canvas");
	 canvas.width =1000;
	 canvas.height =980;
	 
	 var context = canvas.getContext("2d");//2d环境
	 
		drawRect(context,100,100,400,400,10,"red","blue");
		drawRect(context,300,300,400,400,10,"#ccc","rgba(0,256,0,0.4)");
		
	}
	function drawRect(cxt,x,y,width,height,borderWidth,borderColor,fillColor){
		 cxt.beginPath();
		 //矩形的四个点
	/*	cxt.moveTo(x,y);
		cxt.lineTo(x+width,y);
		cxt.lineTo(x+width,y+height);
	    cxt.lineTo(x,y+height)*/
	   
	    cxt.rect(x,y,width,height);//canvas自带的函数|规划出矩形的路径
		cxt.closePath();
		
		cxt.lineWidth =borderWidth;
		cxt.fillStyle =fillColor;
		cxt.strokStyle =borderColor;
		
		cxt.fill();//填充
		cxt.stroke();//绘制
		
	}
	function drawRect2(cxt,x,y,width,height,borderWidth,borderColor,fillColor){
	
		cxt.lineWidth =borderWidth;
		cxt.fillStyle =fillColor;
		cxt.strokStyle =borderColor;
		/*fillStyle和strokStyle的取值的写法
		 
		 *   #ffffff(16进制)
		 *   #f62(ff6622)简写
		 *   rgb(255,128,0)
		 *   rgba(100,100,100,0.8)  ||0.8为透明度
		 * 	 hsl(20,62%,25%)
		 *    hsla(40,25%,33%,0.6)
		 *    red
		 * 
		 * */
		
		//cxt.fillRect();
		//cxt.strokeRect();//这样都可以，参数如何读到的？
		cxt.fillRect(x,y,width,height);//函数|绘制填充矩形
		cxt.strokeRect(x,y,width,height);//函数|绘制边框矩形
		
		
	}
	</script>
</html>
